<template>
    <div class="mainBox fill flex justify-center align-center">
        <Menus :webconfig="articleData.webinfo" :data="articleData.menusnav"></Menus>
        <div class="articleListBox flex justify-center align-center">
            <Waterfall v-if="articleData.dynamic.total>0" :datas="articleData.dynamic.data"></Waterfall>
            <Empty v-else></Empty>
        </div>
        <div v-if="articleData.dynamic.total>0&&articleData.dynamic.total>articleData.dynamic.length" class="loadingMore flex justify-center align-center flex-direction">
            <vs-button @click="loadingMoreHandler" success flat>
                <i class='bx bxs-chevron-down' ></i>
            </vs-button>
        </div>
        <Copy :webconfig="articleData.webinfo" :frendlyData="articleData.friends" :menuDatas="articleData.menus" :bussinessData="articleData.bussiness" :questionsData="articleData.questions.data"></Copy>
    </div>
</template>
<script>
    import {extendPageTotal,extendsMenus,extendsParams,extendsEncrypte} from '~/assets/inc/common.js';
    import {apis} from '~/assets/inc/apis.js';
    export default{
        watchQuery: true,
        async asyncData({$axios,query}){
            const id = query.id;
            extendsEncrypte({id:id,page:1,count:10},$axios);
            let {data} = await $axios.post(apis.dynamicinfoAPI,extendsParams({id:query.id,page:1,count:10}));
            data.message.menusnav = extendsMenus([...data.message.menus]);
            data.message.dynamic.data.forEach(ele=>{
                ele.isShow = false;
            });
            return {articleData:data.message};
        },
        head() {
            return {
                title:'欽天監-强势文化传播中心“文化自信、民族复兴”',
                meta: [
                    { hid: 'keywords',name: 'keywords', content:  '欽天監、钦天监、星象、国学、经典、易经、八卦、命理、风水、玄学'},
                    { hid: 'description',name: 'description',content: '荧荧火光，离离乱惑-为天地立心,为生民立命,为往圣继绝学,为万世开太平！“文化自信、民族复兴”'}
                ]
            }
        },
        data(){
            return{
                pages:1,
                size:10,
                articleData:'default'
            }
        },
        mounted(){
            this.$store.commit('setLoading',false);
        },
        beforeDestroy(){
            this.$store.commit('setLoading',true);
        },
        methods:{
            //加载更多
            async loadingMoreHandler(){
                this.pages++;
                this.$store.commit('setLoading',true);
                extendsEncrypte({id:this.$route.query.id,page:this.pages,count:this.size},this.$axios);
                const res = await this.$axios.post(apis.getDynamicAPI,extendsParams({id:this.$route.query.id,page:this.pages,count:this.size}));
                res.data.message.total = res.data.message.total;
                res.data.message.data.forEach(ele=>{
                    ele.isShow = false;
                });
                this.articleData.dynamic.data = this.articleData.dynamic.data.concat(res.data.message.data);
                this.$store.commit('setLoading',false);
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mainBox{
        flex-flow: column;
        .articleListBox{
            width:1200px;
            padding:150px 0 50px 0;
            &::after{
                clear: both;
                overflow: hidden;
            }
        }
        .loadingMore{
            width:100%;
            padding-top:50px;
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .mainBox{
            flex-flow: column;
            .articleListBox{
                width:100%;
                padding:7rem 0 5rem 0;
                &::after{
                    clear: both;
                    overflow: hidden;
                }
            }
            .loadingMore{
                width:100%;
                padding-top:5rem;
            }
        }
    }
</style>